<template>
  <div class="search-result-container">
    <search-top-component @search="handleSearch" class="top-component" />
    <div class="content">
      <search-left-component :results="results" :specialImage="specialImage" class="left-component" />
      <search-right-component @filter="handleFilter" class="right-component" />
    </div>
  </div>
</template>

<script>
import SearchTopComponent from "./SearchTopComponent.vue";
import SearchLeftComponent from "./SearchLeftComponent.vue";
import SearchRightComponent from "./SearchRightComponent.vue";
import axios from 'axios';

export default {
  components: {
    SearchTopComponent,
    SearchLeftComponent,
    SearchRightComponent,
  },
  data() {
    return {
      results: [],
      specialImage: null,
      idToCategoryName: {
        "science-tech": "学科技术类",
        "arts-sports": "文艺体育类",
        "public-service": "公益服务类",
        "career-development": "职业发展类",
        "international-exchange": "国际交流类",
        "innovation-entrepreneurship": "创新创业类",
        "entertainment": "娱乐休闲类"
      },
      currentKeyword: '',
      currentCategory: '',
      isSearching: false
    };
  },
  created() {
    this.currentKeyword = this.$route.query.keyword;
    this.handleSearch(this.currentKeyword, this.currentCategory);
  },
  methods: {
    async handleSearch(keyword, category = '', forceNormalResult = false) {
      this.isSearching = true; // 设置正在搜索状态

      let params = {
        keyword: keyword,
        categories: this.convertIdToCategoryName(category),
        forceNormalResult: forceNormalResult
      };
      try {
        const response = await axios.get('/index/search', { params });
        if (response.data.code === 0) {
          const data = response.data.data;
          if (data.imageUrl && !forceNormalResult) {
            this.specialImage = data.imageUrl;
            setTimeout(async () => {
              this.specialImage = null;
              // 重新发起搜索请求获取正常结果
              await this.handleSearch(keyword, category, true);
            }, 3000); // 显示图片3秒钟
          } else {
            this.results = data;
            this.isSearching = false; // 搜索完成，取消正在搜索状态
          }
        } else {
          console.error('Failed to fetch search results:', response.data.message);
          this.isSearching = false; // 搜索完成，取消正在搜索状态
        }
      } catch (error) {
        console.error('Error fetching search results:', error);
        this.isSearching = false; // 搜索完成，取消正在搜索状态
      }
    },


    handleFilter(filters) {
      const category = filters.type;
      this.currentCategory = category;

      this.handleSearch(this.currentKeyword, category);
    },
    convertIdToCategoryName(id) {
      return this.idToCategoryName[id] || "";
    }
  },
};
</script>

<style scoped>
.search-result-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffe7c7;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.top-component {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  height: 10%; /* 设置顶部搜索栏占页面的10% */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.content {
  display: flex;
  flex: 1;
  gap: 20px;
  padding: 20px 0;
}

.left-component {
  flex: 3;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.right-component {
  flex: 1;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 美化搜索结果列表 */
.club-info {
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  cursor: pointer;
  background-color: white;
  padding: 20px;
  margin-bottom: 10px; /* 添加底部间距 */
}

.club-info:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.club-header {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e0e0e0;
}

.club-logo {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin-right: 15px;
}

.club-header-text h3 {
  margin: 0;
  color: #333;
  font-size: 1.2em;
}

.club-header-text .leader {
  margin: 5px 0 0;
  font-size: 0.9em;
  color: #666;
}

.club-body {
  padding: 10px;
  line-height: 1.5;
}

.club-body p {
  margin: 4px 0;
}

.category, .status {
  font-size: 0.9em;
  color: #555;
}

.status .open {
  color: #4CAF50;
}

.status .closed {
  color: #F44336;
}

.search-loading {
  width: 100%;
  height: 100vh;
  background-color: #ffe7c7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-loading span {
  font-size: 24px;
  color: #333;
}

.search-loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}

.search-loading-container img {
  margin-left: 10px;
}

</style>